<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .myDiv {
            width: 600px;
            height: 200px;
            border: 1px solid black;
            text-align: center;
        }

        .myColor {
            color: red;
        }
    </style>
</head>
<body>
<div class="myDiv">
    <h1 class="myColor">book</h1>
    <span id = "span">this is a book</span>
    <br/>
    <input type = "text" placeholder="input" id = "input" value = "input"/>
</div>

<br/>
<button id="btn">修改</button>
<script>
    document.querySelector('#btn').addEventListener('click', () => {
        let  h1 = document.querySelector('.myColor')
        h1.style.color = "blue"
        h1.setAttribute('font-size','20px')

        let input = document.querySelector('#input')
        input.value = "text"

        let div = document.querySelector('.myDiv')
        div.setAttribute("style","height:400px")


        let span = document.querySelector('#span')
        span.innerHTML = "books"
    })


</script>
</body>
</html>